<template>
  <el-card class="form-container" shadow="never">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="補充產品基本信息" />
      <el-step title="商品圖文詳情" />
    </el-steps>
    <product-info-detail
      v-show="showStatus[0]"
      v-model="productParam"
      :is-edit="isEdit"
      @nextStep="nextStep"
    />
    <product-attr-detail
      v-show="showStatus[1]"
      v-model="productParam"
      :is-edit="isEdit"
      @prevStep="prevStep"
      @finishCommit="finishCommit"
    />
  </el-card>
</template>
<script>
import ProductInfoDetail from './ProductInfoDetail'
import ProductAttrDetail from './ProductAttrDetail'
import { add, edit, getOne } from '@/api/pms/product'
import { setTitle } from '@/utils'

const defaultProductParam = {
  albumPics: [], // 画册图片
  brandId: null, // 品牌Id
  detailHtml: '', // 	产品详情网页内容
  detailMobileHtmlCn: '', // 中文移动端网页详情
  detailMobileHtmlEn: '', // 	英文移动端网页详情
  detailTitleCn: '', // 中文详细标题
  detailTitleEn: '', // 英文详细标题
  id: '', // 主键
  lockStock: '', // 	锁定库存
  lowStock: '', // 库存预警值
  nameCn: '', // 	中文商品名称
  nameEn: '', // 	英文商品名称
  newStatus: true, // 新品状态
  originalPrice: '', // 	市场价
  pic: '', // 图片
  price: '', // 价格
  productAttributeCategoryId: '', // 属性规格id
  productCategoryId: '', // 	产品类别id
  promotionType: '', // 	促销类型
  publishStatus: true, // 上架状态
  sale: '', // 虚拟已售
  sku: '', // 	sku编码
  upc: '', // 条形码
  sort: '', // 排序
  stock: '', // 库存
  packType: '', // 包裝類型
  integral: '', //  积分兑换, 不填则无法使用积分兑换
  verifyStatus: true, // 	审核状态
  weight: '', // 商品重量，默认为克
  keyWordCn: [], // 關鍵詞中文
  keyWordEn: [], // 關鍵詞中文
  bagFeeStatus: true, // 是否需要膠帶費
  deliverSetId: null, // 配送方案
  predestine: false // 是否預定

}
export default {
  name: 'ProductDetail',
  components: { ProductInfoDetail, ProductAttrDetail },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      active: 0,
      productParam: Object.assign({}, defaultProductParam),
      showStatus: [true, false]
    }
  },
  created() {
    if (this.isEdit) {
      getOne(this.$route.params.id).then(response => {
        this.productParam = response.data
        setTitle('修改商品:' + this.productParam.nameCn)
      })
    }
  },
  methods: {
    hideAll() {
      for (let i = 0; i < this.showStatus.length; i++) {
        this.showStatus[i] = false
      }
    },
    prevStep() {
      if (this.active > 0 && this.active < this.showStatus.length) {
        this.active--
        this.hideAll()
        this.showStatus[this.active] = true
      }
    },
    nextStep() {
      if (this.active < this.showStatus.length - 1) {
        this.active++
        this.hideAll()
        this.showStatus[this.active] = true
      }
    },
    finishCommit(isEdit) {
      this.$confirm('是否要提交该产品', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (isEdit) {
          this.productParam.id = this.$route.params.id
          edit(this.productParam).then(response => {
            this.$message({
              type: 'success',
              message: '提交成功',
              duration: 1000
            })
            this.$store.dispatch('tagsView/delView', this.$route)
            this.$router.go(-1)
          })
        } else {
          add(this.productParam).then(response => {
            this.$message({
              type: 'success',
              message: '提交成功',
              duration: 1000
            })
            this.$store.dispatch('tagsView/delView', this.$route)
            this.$router.push({ path: '/pms/product' })
          })
        }
      })
    }
  }
}
</script>
<style>
  .form-container {
    width: 80%;
    margin: auto;
    height: 100%;
    padding-bottom: 100px ;
  }
</style>

